<template>
	<view class="content bottomTag">


		<view class="lineGray "></view>
		<view class="padding line">
			<image class="image-head-mid" :src="user.avator" @click="gotoUser"></image>
			<view class="marginLeft text-light-black-18" @click="gotoUser">{{user.name}}</view>
			<view class="bigEmpty padding">
				<view v-show="!user.focused" style="width: 150rpx;" class="btnBlue line textwhite8 marginLeft"
					@click="foucus(user) ">关注</view>
				<view v-show="user.focused" style="width: 150rpx;" class="btnBlue line textwhite8 marginLeft"
					@click="foucus(user) ">已关注</view>
			</view>
			<view style="position: relative;">
				<image @click="showMenu = !showMenu" style="width: 100rpx;" mode="widthFix" src="/static/icon-information-action.png"></image>
				<view v-if="false" class="menu-box">
					<block v-for="(item, index) in menuList" :key="index">
						<view @click="onClickMenuItem(index)" class="menu-item">{{ item.title }}</view>
					</block>
				</view>
			</view>
		</view>

		<view class=" marginTop marginLeft marginRight">
			<swiper :indicator-dots="imageList.length!=1" indicator-active-color="#FFFFFF" circular autoplay
				:style="{'height': height}">
				<swiper-item v-for="(item ,index) in imageList" :key="index">
					<image class="oneDom imageItem1" mode="widthFix" :src="item" style="border-radius: 20rpx;" />
				</swiper-item>
			</swiper>

		</view>

		<view class="padding line">
			<view class="bg-yellow paddingSmall bold line" style="width: 92rpx; font-size: 24rpx; line-height: 28rpx;">AI生成</view>
			<view class="marginLeft bigEmpty">{{name}}</view>
		</view>
		<view v-show="content" class="padding">{{content}}</view>

		<view v-show="goodContent" class="marginTop bg-gray-circle-rect  padding marginLeft marginRight">
			<view class="line">
				<view class="bigEmpty"><text class="textblack18   ">正向指令 </text></view>
				<view><text class="textblack18 ">复制 </text></view>
			</view>
			<view class="lineGray marginTop"></view>
			<view class="   textblack14 marginTop">
				<text> {{goodContent}}</text>
			</view>
		</view>
		<view v-show="badContent" class="marginTop marginLeft marginRight bg-gray-circle-rect  padding">
			<view class="line">
				<view class="bigEmpty"><text class="textblack18   ">反向指令 </text></view>
				<view><text class="textblack18 ">复制 </text></view>
			</view>
			<view class="lineGray marginTop"></view>
			<view class="   textblack14 marginTop">
				<text> {{badContent}}</text>
			</view>
		</view>
		<view class="marginTop bg-gray-circle-rect marginLeft marginRight padding">
			<text class="textblack18 "> 创作信息 </text>
			<view class="lineGray marginTop"></view>
			<view class="textblack14" style="line-height: 50rpx; color: #3D3D3D; font-size: 26rpx;">
				<view class="marginTop"> <text>创作者</text> <text class=" floatRight">{{user.name}}</text></view>
				<view class="marginTop"> <text>创建时间</text> <text class=" floatRight">{{createTime}}</text></view>
				<view class="marginTop"> <text>模型主题</text> <text class=" floatRight">{{module}}</text></view>
				<view class="marginTop"> <text>画面尺寸</text> <text class=" floatRight">{{size}}</text></view>
				<view v-show="style" class="marginTop"> <text>风格选择</text> <text class=" floatRight">{{style}}</text>
				</view>
				<view v-show="false" class="marginTop"> <text>Seed(种子)</text> <text class=" floatRight">无</text></view>
				<view class="marginTop"> <text>图片提示</text> 
				<text v-if="attachImages.length>0&&attachImages[0]" @click="goBig()"
						class=" textblue14 floatRight">查看</text>
					<text v-else="attachImages.length==0" class="  floatRight">无</text>
				</view>
			</view>
		</view>
		<view class="lineGray marginTop"></view>
		<view class="line marginTop marginLeft marginRight">
			<view style="font-size: 28rpx;">评论：{{commentList.length}}条</view>
			<view class="bigEmpty"></view>
			<view style="font-size: 24rpx; color: #666;">举报</view>
		</view>
		<view class="column padding-large" v-show="commentList.length==0">
			<view>
				<image class="image-small" src="/static/empty-comment.png"></image>
			</view>
			<view>暂时还没有评论</view>
			<view>快来说说你的看法吧</view>
		</view>
		<view v-show="commentList.length!=0">
			<view v-for="(item,index) in commentList">
				<view class="padding">
					<view class="line" @click="commendItemClick(item,item.child)">
						<image class="image-head-small" :src="item.user.avator"></image>
						<view class="marginLeft">{{item.user.name}}</view>
						<view class="marginLeft bigEmpty">{{item.createTime}}</view>
					</view>
					<view class="marginTop">{{item.content}}</view>
					<view class="marginLeft bg-gray-circle-rect marginTop" v-show="item.child.length!=0"
						@click="commendItemClick(inItem,item.child)">
						<view class="padding " v-for="(inItem,index) in item.child">
							<view class="line">
								<image class="image-head-small" :src="inItem.user.avator"></image>
								<view class="marginLeft">{{inItem.user.name}}</view>
								<view class="marginLeft bigEmpty">{{inItem.createTime}}</view>
							</view>
							<view class="marginTop">{{inItem.content}}</view>
							<view class="lineGray marginTop"></view>
						</view>
					</view>
					<view class="padding"></view>
					<view class="lineGray marginTop"></view>
				</view>
			</view>
		</view>
		<view style="height: 90rpx;"></view>
		<view class=" bottom-fix-1 column bgWhite width100 ">

			<view class="lineGray"></view>
			<view class="padding line  width100  ">
				<!-- <view class="column">
						<view>
								<image class="icon-normal" src="/static/icon-start.png"></image>
							<image class="icon-normal" src="/static/start-yellow.png"></image>
						</view>
						<view class="margin-top-0">
							0
						</view>
					</view> -->
				<view class="column marginLeft ">
					<image v-if="item.loved" @click="love(item)" class="icon-normal" src="/static/love-red.png">
					</image>
					<image v-else @click="love(item)" class="icon-normal" src="/static/love-gray.png">
					</image>
					<view>
						{{item.loveNum}}
					</view>
				</view>
				<view class="column margin-left-3">
					<view class="line paddingSmall bg-more-color-round-rect textwhite14  " style="width: 150rpx;"
						@click.stop="sameProduct(item)"> &nbsp;一键同款&nbsp;</view>
				</view>
				<view class="margin-left-3 bigEmpty line marginRight">
					<text v-show="comment[0]==' '">
						{{replayName}}
					</text>
					<input class="bigEmpty" placeholder="说点啥吧..." v-model="comment" @input="onInput" />
					<div style="width: 100rpx;" class=" paddingSmall bg-gray-circle-rect line" @click="send()"> 发送</div>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import request from "/common/request.js"
	export default {
		data() {
			return {
				showMenu: false, //是否展示menu列表
				menuList: [
					{
						icon: '',
						title: '分享'
					},
					{
						icon: '',
						title: '置顶'
					},
					// {
					// 	icon: '',
					// 	title: '编辑'
					// },
					// {
					// 	icon: '',
					// 	title: '删除'
					// }
				], //菜单列表
				height: "90vw",
				type: 0,
				id: 0,
				imageList: [],
				attachImages: [],
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 1,
				goodContent: "",
				badContent: "",
				name: "",
				content: "",
				createTime: "",
				author: "",
				module: "",
				size: "",
				style: "",
				returnData: null,
				plateUserId: "",
				user: {},
				commentList: [],
				comment: "",
				item: {},
				replayName: "",
				replayId: 0,
				replayList: [],
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.name,
				path: 'pages/PictureDetail/PictureDetail?id=' + this.id,
				imageUrl: this.imageList[0]
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.name,
				path: 'pages/PictureDetail/PictureDetail?id=' + this.id,
				imageUrl: this.imageList[0]
			}
		},
		onHide: function() {
			console.log("onhide")
		},
		onUnload: function() {
			console.log("onUnload")
		},
		onLoad: function(query) {
			this.id = query.id;
			this.goodContent = query.goodContent;
			this.moduleIndex = query.moduleIndex;
			this.styleIndex = query.styleIndex;
			this.sizeTab2Index = query.sizeTab2Index;
			this.sizeTab1Index = query.sizeTab1Index;
			this.createTime = query.createTime;
			this.size = query.size;
			this.badContent = query.badContent;
			this.module = query.module;
			this.style = query.style;
			this.author = uni.getStorageSync("name")
		},
		onReady: function() {
			if (this.id > 0) {
				this.queryData();
				this.queryComment()
			}
		},
		methods: {
			
			/**
			 * 点击菜单列表
			 */
			onClickMenuItem(index) {
				switch(index) {
					case 0:
					//分享
					break
					case 1:
					//置顶
					break
					case 2:
					//编辑
					uni.navigateTo({
						url: '/pages/PublishPicture/PublishPicture1?id=' + this.id
					})
					break
					case 3:
					//删除
					let that = this
					uni.showModal({
						title: '温馨提示',
						content: '确认删除当前作品？',
						cancelText: '取消',
						confirmText: '确认',
						cancelColor: '#9999',
						confirmColor: '#0033FF',
						success: res => {
							if (res.confirm) {
								
							}
						}
					})
					break
					default:
					break
				}
				this.showMenu = false
			},

			goBig() {
				// uni.navigateTo({
				// 	url:"/pages/Test/Test?images="+this.imageList
				// })
				uni.previewImage({
					urls: this.attachImages,
					current: 0

				})

			},

			sameProduct(item) {


				const url = getApp().globalData.apiUrl + "/api/v1/user/mine";
				const that = this;
				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						if (res.code == 0) {
							var level = uni.getStorageSync("level")
							var sameNum = res.data.sameNum
							console.log(level)

							if (!level && !sameNum) {
								uni.showModal({
									title: "一键同款是权益卡的权益，请前往开通权益卡",
									confirmText: "去开通",
									cancelText: "我知道",
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/Coin/Coin?openType=1"
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}

									}
								})
								return;
							}
							const job = item.job
							uni.showLoading({
								title: "上传资料中..."
							})
							const url = getApp().globalData.apiUrl + "/api/v1/job/sameProduct";
							request(url, "POST", {
									parentId: item.job.id
									// style: that.styleIndex,
									// module: that.moduleIndex,
									// width2height: that.sizeTab1Index,
									// pictureWeight: pictureWeight,
									// cmd: cmd,
									// state: 0,
									// type: that.productMode,
									// attachment: attachment,
									// style: that.styleIndex,
									// productMode: that.productMode,
									// module: that.moduleIndex,
								}, uni.getStorageSync("token"))
								.then(function(res) {
									uni.hideLoading()
									console.log('返回正确回调', res)
									var size = "1:1";
									var sizeArray = [
										"1:1",
										"1:1",
										"1:2",
										"4:3",
										"3:4",
										"16:9",
										"9:16"
									]
									size = sizeArray[job.width2height]
									var module = "精彩"
									var moduleArray = [
										"1:1",
										"1:1",
										"1:2",
										"1:2",
										"精彩",
										"细腻",
										"动漫",
										"创意",
										"照片"
									]
									module = moduleArray[job.module]
									var style = "长焦镜头"
									var styleArray = [
										"长焦镜头",
										"长焦镜头",
										"手绘背景",
										"CG数字渲染",
										"哑光颜",
										"X光片",
										"矢量设计海报",
										"极简线条画",
										"炭笔画",
										"更多"
									]
									style = styleArray[job.style]
									var url1 =
										"/pages/CreatePictureResult/CreatePictureResult?id=" +
										res.data.id + '&goodContent=' + job.cmd + '&moduleIndex=' +
										job.module +
										'&styleIndex=' +
										job.style + "&sizeTab1Index=" + job.width2height +
										"&createTime=" + job.createTime +
										"&size=" + size +
										"&style=" + style +
										"&badContent=" + "" +
										"&module=" + module
									uni.navigateTo({
										url: url1
									})
								}, function(err) {
									uni.hideLoading()
									console.log('返回错误回调', err)
								})

						}
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},
			onInput(e) {
				// 【不用v-model绑定表单,直接实时获取值】这种方式是uni-app官方的方式,测试结果正确！
				console.log(e.detail)
				if (!e.detail) {
					this.replayId = 0;
					this.replayName = ""
				}
			},
			commendItemClick(item, list) {

				this.comment = " ";
				this.replayName = "回复 " + item.user.name + "："
				this.replayId = item.id
				this.replayList = list;
				if (item.parentId) {
					this.replayId = item.parentId
				}
				this.$nextTick(function() {
					setTimeout(() => {
						uni.createSelectorQuery().select('.bottomTag').boundingClientRect((res) => {
							console.log(res)
							uni.pageScrollTo({
								scrollTop: res.height,
								duration: 200
							})
						}).exec()
					}, 50)

				});
			},

			setH() {
				const that = this;

				setTimeout(() => {
						// uniapp自带方法 - 获取DOM的高度等信息
						// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
						// 节点查询
						that.sethh();
					},
					300)
				setTimeout(() => {
					// uniapp自带方法 - 获取DOM的高度等信息
					// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
					// 节点查询
					that.sethh();


				}, 600)
				setTimeout(() => {
					// uniapp自带方法 - 获取DOM的高度等信息
					// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
					// 节点查询
					that.sethh();


				}, 1200)

				setTimeout(() => {
					// uniapp自带方法 - 获取DOM的高度等信息
					// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
					// 节点查询
					that.sethh();


				}, 2000)
				setTimeout(() => {
					// uniapp自带方法 - 获取DOM的高度等信息
					// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
					// 节点查询
					that.sethh();
				}, 5000)

			},
			sethh() {
				const that = this;
				const query = uni.createSelectorQuery().in(that)
				// 开始
				query.select('.oneDom').boundingClientRect(data => {
					console.log("【DOM尺寸信息】" + JSON.stringify(data))
					// 获取DOM的高度， 单位是像素
					let h = data.height
					// 补上单位
					h += 'px'
					// 实际高度赋值给swiper
					that.height = h
					console.log('【动态设置高度】', h)
				}).exec()
			},

			love(item) {
				if (item.loved) {
					const url = getApp().globalData.apiUrl + "/api/v1/love";
					request(url, "DELETE", {
							pictureCollectionId: item.id,
						}, uni.getStorageSync("token"))
						.then(function(res) {
							console.log('返回正确回调', res)
							item.loved = false
							item.loveNum = item.loveNum - 1
						}, function(err) {
							console.log('返回错误回调', err)
						})
				} else {
					const url = getApp().globalData.apiUrl + "/api/v1/love";
					request(url, "POST", {
							pictureCollectionId: item.id,
						}, uni.getStorageSync("token"))
						.then(function(res) {
							console.log('返回正确回调', res)
							item.loved = true
							item.loveNum = item.loveNum + 1
						}, function(err) {
							console.log('返回错误回调', err)
						})
				}
			},
			gotoUser() {
				if (this.user.id)
					uni.navigateTo({
						url: "/pages/PersonalCenter/UserCenter?id=" + this.user.id
					})
			},
			send() {
				if (!this.comment) {
					uni.showToast({
						title: "评论内容"
					})
					return
				}
				var comment = this.comment;
				this.comment = ""
				const that = this
				const url = getApp().globalData.apiUrl + "/api/v1/comment";
				console.log(this.comment)
				request(url, "POST", {
						content: comment,
						pictureCollectionId: this.id,
						parentId: this.replayId
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						that.comment = ""
						res.data.user = {
							name: uni.getStorageSync("name"),
							avator: uni.getStorageSync("avator")
						}
						res.data.child = []
						if (that.replayId) {
							that.replayList.push(res.data)
						} else {
							that.commentList.push(res.data)
						}

					}, function(err) {
						console.log('返回错误回调', err)

					})
			},
			foucus(item) {
				if (item.focused) {
					const url = getApp().globalData.apiUrl + "/api/v1/user/deleteFocus";
					request(url, "DELETE", {
							focusUserId: item.id,
						}, uni.getStorageSync("token"))
						.then(function(res) {
							console.log('返回正确回调', res)
							item.focused = false
						}, function(err) {
							console.log('返回错误回调', err)

						})
				} else {
					const url = getApp().globalData.apiUrl + "/api/v1/user/focus";
					request(url, "POST", {
							focusUserId: item.id,
						}, uni.getStorageSync("token"))
						.then(function(res) {
							console.log('返回正确回调', res)
							item.focused = true

						}, function(err) {
							console.log('返回错误回调', err)
						})
				}
			},
			queryComment() {
				const url = getApp().globalData.apiUrl + "/api/v1/comment/all"
				const that = this
				request(url, "GET", {
						pictureCollectionId: this.id,
						size: 100
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调comment', res)
						that.commentList = res.data
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},
			clickOption(num) {
				this.type = 0;
				this.dofinish = false;
				this.percent = 0;
				this.type = 0
				const that = this;
				this.imageList = []
				const url = getApp().globalData.apiUrl + "/api/v1/job"
				this.nextDo = true
				request(url, "POST", {
						taskTag: "" + num,
						state: 6,
						type: 0,
						productMode: that.returnData.productMode,
						plateUserId: this.plateUserId,
						taskRelationId: that.returnData.taskRelationId,
						platformMessageId: that.returnData.platformMessageId,
						cmd: that.goodContent
					}, uni.getStorageSync("token"))
					.then(function(res) {
						that.id = res.data.id;
						console.log('返回正确回调', res)
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},
			queryData() {
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection/" + this.id;
				const that = this;
				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						that.item = res.data;
						that.user = res.data.user
						that.returnData = res.data.job;
						that.name = res.data.name;
						that.content = res.data.content;
						that.imageList = res.data.formatImages
						that.sizeTab1Index = res.data.job.width2height
						if (!that.sizeTab1Index) {
							that.sizeTab1Index = 1
						}
						that.createTime = res.data.job.createTime
						that.moduleIndex = res.data.job.module
						that.styleIndex = res.data.job.style
						that.goodContent = res.data.job.cmd
						that.attachImages = res.data.job.attachImages
						var size = "1:1";
						var sizeArray = [
							"1:1",
							"1:1",
							"1:2",
							"4:3",
							"3:4",
							"16:9",
							"9:16"
						]
						that.size = sizeArray[that.sizeTab1Index]
						var module = "精彩"
						var moduleArray = [
							"1:1",
							"1:1",
							"1:2",
							"1:2",
							"精彩",
							"细腻",
							"动漫",
							"创意",
							"照片"
						]

						that.module = moduleArray[that.moduleIndex]
						console.log(that.module)
						var style = "长焦镜头"
						var styleArray = [
							"长焦镜头",
							"长焦镜头",
							"手绘背景",
							"CG数字渲染",
							"哑光颜",
							"X光片",
							"矢量设计海报",
							"极简线条画",
							"炭笔画",
							"更多"
						]
						that.style = styleArray[that.styleIndex]
						that.setH()
					}, function(err) {
						console.log('返回错误回调', err)
					})
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	
	.menu-box {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 168rpx;
		height: 328rpx;
		border-radius: 14rpx;
		transform: translateY(100%);
		z-index: 10;
		background-color: #fff;
		box-shadow: 0 0 5px #eee;
		display: flex;
		flex-direction: column;
		padding: 0 18rpx;
		box-sizing: border-box;
	}
	
	.menu-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 32rpx;
		color: #2E2E2E;
		font-weight: 500;
	}
	
	.menu-item:not(:last-child) {
		border-bottom: 2rpx solid #C4BFBF;
	}

	.bg-yellow {
		border-radius: 15rpx;
		background: linear-gradient(104deg, #E8B45A 2%, rgba(235, 217, 100, 0.75) 97%, rgba(232, 203, 17, 0.51) 97%);
	}

	.progress-bg {
		width: 142.92px;
		height: 6.8px;
		border-radius: 20px;
		background: #D8D8D8;
	}

	.progress-content {
		height: 6.8px;
		border-radius: 20px;
		opacity: 1;
		background: #D000FF;
	}

	.btnSize {

		width: 20vw;
		height: 5vw;
		flex-direction: row;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.marginLeft1 {
		margin-left: 2vw;
	}

	.grayBtnBg {
		background: #4E5058;
		border-radius: 6px 6px 6px 6px;
	}


	.content {
		min-height: 100vh;


	}

	.progress-box {
		display: flex;
		height: 50rpx;
		margin-bottom: 60rpx;
	}

	.empty {
		width: 50upx;
		height: 0;
	}

	.loadingContent {
		border-radius: 14rpx;
		background: rgba(250, 250, 250, 0.3);
		width: 720rpx;
		height: 720rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}



	.imageContent {

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0%;
		margin: 0%;
		justify-content: center;
		align-content: center;
		border-radius: 14px;
	}

	.textBg {
		border-radius: 14rx;
		background: rgba(150, 140, 150, 0.3);
	}

	.imageItem1 {
		padding: 0;
		margin: 0;
		/* max-width: 90vw; */
		width: 100%;
	}

	.imageItem {
		padding: 0;
		margin: 0;
		max-width: 45vw;
		width: 45vw;
	}

	.iconImage {
		width: 25upx;
		height: 25upx;
	}
</style>